<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户分页管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 表格悬停效果 */
        .table-hover tbody tr:hover {
            background-color: #e9f5ff;
        }
        /* 分页链接悬停和激活效果 */
        .pagination .page-link:hover,
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            color: white;
            border-color: #0d6efd;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto px-4 py-8 max-w-7xl">
    <div class="bg-white p-8 rounded-xl shadow-lg">
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-blue-600">用户列表</h2>
            <div class="flex space-x-4">
                <a th:href="@{/add}" class="btn bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-opacity-50 transition duration-300">
                    <i class="fa-solid fa-user-plus me-2"></i> 添加用户
                </a>
                <a th:href="@{/login}" class="btn bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 focus:ring-opacity-50 transition duration-300">
                    <i class="fa-solid fa-right-from-bracket me-2"></i> 退出登录
                </a>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="table w-full table-auto table-hover">
                <thead class="bg-blue-600 text-white">
                <tr>
                    <th class="px-4 py-3 text-left w-20">ID</th>
                    <th class="px-4 py-3 text-left">账号</th>
                    <th class="px-4 py-3 text-left">姓名</th>
                    <th class="px-4 py-3 text-left">性别</th>
                    <th class="px-4 py-3 text-left">手机号</th>
                    <th class="px-4 py-3 text-left w-40">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="user : ${page.records}">
                    <td class="px-4 py-3" th:text="${user.id}"></td>
                    <td class="px-4 py-3" th:text="${user.account}"></td>
                    <td class="px-4 py-3" th:text="${user.realName}"></td>
                    <td class="px-4 py-3" th:text="${user.sex == 1 ? '男' : (user.sex == 2 ? '女' : '不详')}"></td>
                    <td class="px-4 py-3" th:text="${user.phone}"></td>
                    <td class="px-4 py-3">
                        <a th:href="@{/selectById(id=${user.id})}" class="btn btn-sm bg-blue-500 text-white px-3 py-1 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 transition duration-300">
                            编辑
                        </a>
                        <a th:href="@{/deleteById(id=${user.id})}" class="btn btn-sm bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-opacity-50 transition duration-300 ms-2"
                           onclick="return confirm('确定要删除该用户吗？');">
                            删除
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="flex justify-between items-center mt-6">
            <div class="text-gray-600">
                共 [[${page.total}]] 条，每页 [[${page.size}]] 条
            </div>
            <nav>
                <ul class="pagination flex space-x-2">
                    <li class="page-item" th:classappend="${page.current == 1} ? 'disabled'">
                        <a class="page-link px-3 py-1 border rounded-md" th:href="@{/page(current=1)}">首页</a>
                    </li>
                    <li class="page-item" th:classappend="${page.current <= 1} ? 'disabled'">
                        <a class="page-link px-3 py-1 border rounded-md" th:href="@{/page(current=${page.current-1})}">上一页</a>
                    </li>
                    <li class="page-item disabled">
                        <span class="page-link px-3 py-1 border rounded-md text-gray-800">第 [[${page.current}]] 页</span>
                    </li>
                    <li class="page-item" th:classappend="${page.current >= page.pages} ? 'disabled'">
                        <a class="page-link px-3 py-1 border rounded-md" th:href="@{/page(current=${page.current+1})}">下一页</a>
                    </li>
                    <li class="page-item" th:classappend="${page.current == page.pages} ? 'disabled'">
                        <a class="page-link px-3 py-1 border rounded-md" th:href="@{/page(current=${page.pages})}">尾页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
